<script setup name="myabsent">
import OAPageHeader from '@/components/OAPageHeader.vue';
import { ref, reactive, onMounted, computed, watch } from "vue";
import absentHttp from '@/api/absentHttp';
import { ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';



let dialogFormVisible = ref(false)

let absents = ref([])
let pagination = reactive({
    total:0,
    page:1
})

let absentForm = reactive({
    status:2,
    response_content:""
})
let rules = reactive({
    status:[{required:true,message:'请选择处理结果！',trigger:'change'}],
    response_content:[{required:true,message:"请输入理由！",trigger:"blur"}]
})

let handleIndex = null

let absentFormREF = ref()



onMounted(async()=>{
    try{
        let data = await absentHttp.getSubAbsent()
        console.log("-------")
        console.log(data)
        pagination.total = data.count;
        absents.value = data.results;
    }catch(detail){
        ElMessage.error(detail)
    }
})

const onShowDialog = (index) =>{
    absentForm.status = 2
    absentForm.response_content = ""
    dialogFormVisible.value = true
    handleIndex = index
}

const onSubmitAbsent =()=>{
    absentFormREF.value.validate(async (valid,fields)=>{
        if(valid){
            try{
                console.log("表单验证状态:", valid);  // 调试日志
                dialogFormVisible.value = false
                const absent = absents.value[handleIndex]
                const data = await absentHttp.handleSubAbsent(absent.id,absentForm.status,absentForm.response_content)
                console.log("-------审批下属考勤",data)
                absents.value.splice(handleIndex,1,data)
                ElMessage.success("下属考勤处理成功")
            }catch(detail){
                ElMessage.error(detail)
            }
        }
    })
    
}


</script>

<template>
    <OADialog title="处理审批" v-model="dialogFormVisible" @submit="onSubmitAbsent">
        <el-form :model="absentForm" :rules="rules" ref="absentFormREF" label-width="100px">
            <el-form-item label="处理审批" prop="status">
                <el-radio-group v-model="absentForm.status" class="ml-4"> 
                    <el-radio :value="2">通过</el-radio>
                    <el-radio :value="3">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="理由" prop="response_content">
                <el-input type="textarea" v-model="absentForm.response_content" autocomplete="off"></el-input>

            </el-form-item>
        </el-form>
    </OADialog>
    <OAMain title="下属考勤"> 
        <el-card>
        <el-table :data="absents">
            <el-table-column prop="title" label="标题" />
            <el-table-column label="发起者">
                <template #default="scope">
                    {{ '['+scope.row.requester.department.name+']_' +scope.row.requester.realname}}
                </template>
            </el-table-column>
            <el-table-column prop="absent_type.name" label="类型" />
            <el-table-column prop="requests_content" label="原因" />
            <el-table-column label="发起时间">
                <template #default="scope">
                    {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column label="开始时间">
                <template #default="scope">
                    {{ timeFormatter.stringFromDateTime(scope.row.start_date) }}
                </template>
            </el-table-column>
            <el-table-column label="结束时间">
                <template #default="scope">
                    {{ timeFormatter.stringFromDateTime(scope.row.end_date) }}
                </template>
            </el-table-column>
            <el-table-column prop="responder.realname" label="审核领导" />
            <el-table-column prop="response_content" label="反馈意见" />
            <el-table-column label="审核状态">
                <template #default="scope">
                    <el-tag tyep="info" v-if="scope.row.status == 1">审核中</el-tag>
                    <el-tag tyep="success" v-else-if="scope.row.status == 2">已通过</el-tag>
                    <el-tag tyep="danger" v-else="scope.row.status==1">未通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="处理">
                <template #default="scope">
                    <el-button v-if="scope.row.status==1" @click="onShowDialog(scope.$index)"   type="primary" icon="EditPen">处理</el-button>
                    <el-button v-else disabled type="default">已处理</el-button>
                </template>
            </el-table-column>
        </el-table>
            <template #footer>
                <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="1"
                    v-model:current-page="pagination.page" /> -->
                    <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
    </el-card>
    </OAMain>
    
   
</template>

<style scoped>
</style>